<template>
  <div>

    <el-row>
      <el-col :span="24">
        <el-input
            v-if="column.display"
            v-model="val"
            size="small"
            :disabled="column.disabled"
            :placeholder="column.showContent | capitalize"
        ></el-input>
      </el-col>


    </el-row>

  </div>
</template>

<script>
import { evalFormula,FORMULA_MATHS } from 'formula-editor-vue3'
import {customFormulaFun,custumVariablesFun} from '@/framework-core/utils/formulaData';
import mixFormula from './mixFormula';
import mixCalculator from "@framework-core/components/design/calculator/mixCalculator";

export default {
  inject: ['getViewFormData',"viewFormData"],
  name: 'formula',
  model: {
    prop: 'value',
    event: 'input'
  },
  mixins: [mixFormula],
  props: ['column', 'modelValue', '$index'],

  data() {
    const val = this.viewFormData?.form ? this.viewFormData.form[this.column.prop] : '';
    const { disabled, display } = this.column || {};
    return {
      val,
      disabled,
      display
    };
  },
  filters: {

    capitalize(val) {
      if (val) {
        return val.replace(/&nbsp;/g, '').replace(/<\/?[^>]*>/g, '');
      } else {
        return '自动计算';
      }
    }
  },
  created() {

    // setTimeout(() => {
    //  this.getResult()
    // }, 3000)
    //this.watchProp();
  },
  methods: {
    // watchProp(){
    //   this.$watch('viewFormData.form.'+this.column.prop, (newValue, oldValue) => {
    //     this.val = newValue;
    //   });
    // },
    handleChange(val) {
      this.$emit('update:modelValue', val);
    },
    getResult() {
      this.val = this.getFormulaResult(this.column, this.viewFormData);
    }
  }
};
</script>

<style lang="scss" scoped>
.font1 {
  color: #999;
}
</style>
